
<template>
  <div>
    <Card title="行政区划"  ref="card">
      <a href="#" slot="extra" @click.prevent="SearchArea">刷新</a>
      <Button size="large" type="primary" icon="ios-add" v-on:click="AddArea">新增地区</Button>
    </Card>
    <Modal :mask-closable="false" v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{typeName}}</span>
      </p>
      <Row>
        <Input v-model="areaTemp.AreaName" size="large" placeholder="地区名称"/>
      </Row>
      <br>    
     
      <div slot="footer">
        <Button type="primary" size="large" @click="SaveArea">保存</Button>
      </div>
    </Modal>

    <Table class="margin-top-10" border :columns="tableTitle" :data="tableData" ref="table"  :height="tableHeight"></Table>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import {
  SearchArea,
  SaveArea
} from "@/api/data";
export default {
  name: "area_manager",
  data() {
    return {
      tableHeight:450,
      modal2: false,
      tableTitle: [
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return  h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.areaTemp = params.row;
                      this.typeName='修改地区'
                    
                      this.modal2 = true;
                    }
                  }
                },
                "修改"
              )  
          }
        },
        {
          title: "地区",
          key: "AreaName"
        },      
    
      ],
      tableData: [],
      typeName: "新增地区",
      areaTemp: {
        Gid: "",      
        AreaName: ""      
      },
    
    };
  },
  methods: {
    clearArea() {
      this.typeName = "新增地区";
      this.areaTemp = {
      Gid: "",      
      AreaName: ""  
      };
    },
    AddArea() {
      this.clearArea();
      this.modal2 = true;
    },  
    SearchArea() {
      let vm = this;
      SearchArea().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveArea() {
      let vm = this;      
      if (!this.areaTemp.AreaName) {
        Message.error("地区名称不能为空");
        return;
      }      
      SaveArea(this.areaTemp).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.modal2 = false;
          vm.clearArea();
          vm.SearchArea();
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
  },
  created() {},
  mounted() {
     var cardHeight = this.$refs.card.$el.offsetHeight;  
     this.tableHeight =
      window.innerHeight - cardHeight-160;
    this.SearchArea();
  }
};
</script>
